<template>
  <div>
    <div v-if="showFileList" class="FileGrid">
      <div class="grayground">
        <FileList @confirmselect="confirmSelect" @cancelselect="cancelSelect"></FileList>
      </div>
    </div>
    <div class="edit-book">
      <div class="topsavebar">
        <el-button icon="el-icon-lightning" size="mini" type="info" @click="saveShelfData">保存</el-button>
        <span style="width:6em"></span>
        <el-button icon="el-icon-lightning" size="mini" type="info" @click="toReview">预览</el-button>
      </div>
      <!-- <div>通知消息:</div> -->
      <div>
        <el-input v-model="notice.info" placeholder="通知消息" type="textarea" :rows="1">{{ notice.info }}</el-input>
      </div>
      <el-divider></el-divider>
      <div v-if="addbookEnable === 1">
        <el-input v-model="selectedshelfrow.shelftitle" placeholder="书籍大类名称" type="textarea" :rows="1">{{ selectedshelfrow.shelftitle }}</el-input>
        <el-button @click="addbook()" size="mini">添加书籍</el-button>
      </div>
      <div v-show="addbookEnable === 0">
        <div class="info">编辑书籍</div>
        <!-- <div style="margin:10px 0px 0px 0px" v-if="addbookEnable === 0">
          <span>
            <el-button size="mini" @click="movebook('left')" circle icon="el-icon-arrow-left"></el-button>
          </span>
          <span style="margin:0 0.5em;"></span>
          <span>
            <el-button size="mini" @click="movebook('right')" circle icon="el-icon-arrow-right"></el-button>
          </span>
          <span style="margin:1em;"></span>
          <span>
            <el-button size="mini" @click="removebook" circle icon="el-icon-copy-document"></el-button>
          </span>
          <span style="margin:0.5em;"></span>
          <span>
            <el-button size="mini" @click="removebook" circle icon="el-icon-document-add"></el-button>
          </span>
        </div> -->
        <el-divider></el-divider>
        <div class="flexcol">
          <div class="flexrow">
            <el-radio-group v-model="radio1" @change="ratiochange">
              <el-radio label="">正常</el-radio>
              <el-radio label="wide">厚</el-radio>
              <el-radio label="verywide">特厚</el-radio>
              <el-radio label="thin">薄</el-radio>
              <el-radio label="verythin">特薄</el-radio>
            </el-radio-group>
          </div>
          <div class="flexrow" style="margin-top: 10px">
            <el-radio-group v-model="radio2" @change="ratiochange">
              <el-radio label="">正常</el-radio>
              <el-radio label="long">高</el-radio>
              <el-radio label="verylong">特高</el-radio>
              <el-radio label="short">矮</el-radio>
              <el-radio label="veryshort">特矮</el-radio>
            </el-radio-group>
          </div>
          <div class="flexrow" style="margin-top:10px">
            <el-radio-group v-model="radio3" @change="ratiochange">
              <el-radio label="">正常</el-radio>
              <el-radio label="left">左边倒</el-radio>
              <el-radio label="right">右边倒</el-radio>
            </el-radio-group>
          </div>
        </div>
        <el-divider></el-divider>
        <div>
          <div class="info">书籍类型</div>
          <el-dropdown trigger="click" @command="handleCommand">
            <el-button size="mini" type="info" class="el-dropdown-link"> {{ booktype }}<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in bookstyle" :key="index" :command="item">{{ item.content }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-divider></el-divider>
        <div>
          <div class="info">书籍标题</div>
          <div>
            <el-input v-model="selecteditem.title" placeholder="请输入标题" type="textarea" :rows="1">{{ selecteditem.title }}</el-input>
          </div>
        </div>
        <div v-if="selecteditem.typekey != 2 && selecteditem.typekey != 3 && selecteditem.typekey != 4">
          <div class="info">文本编辑</div>
          <div>
            <el-input v-model="selecteditem.content" type="textarea" :rows="5" placeholder="请输入内容">{{ selecteditem.content }}</el-input>
          </div>
        </div>
        <div v-if="selecteditem.typekey == 0 || selecteditem.typekey == 3">
          <el-button size="mini" @click="selectCardImg">选择图片</el-button>
          <div v-if="(selecteditem.typekey == 0 || selecteditem.typekey == 3) && selectedimgurl" style="width:100%;height:250px;position:relative;">
            <el-button class="abs topright" type="danger" icon="el-icon-delete" circle size="mini" @click="deletecardimg(selecteditem)"></el-button>
            <img class="file-img" :src="selectedimgurl" style="width:100%;height:100%;" />
          </div>
        </div>
        <div v-if="selecteditem.typekey == 4" style="margin-top:10px;">
          <!---------------商品列表----------------->
          <div style="position:relative;width:300px;height: 300px;border-bottom:1px solid #000" v-for="(item, itemindex) in selecteditem.listdata" :key="itemindex" @click="selectlistitem(item, itemindex)">
            <el-button v-if="item == selectedlistitem" class="centerpos" icon="el-icon-edit" circle size="mini" @click="showFileList = true"></el-button>
            <el-button v-if="item == selectedlistitem" style="z-index:1;" class="abs topright" type="danger" icon="el-icon-delete" circle size="mini" @click="deleteitem(selecteditem.listdata, itemindex)"></el-button>
            <el-image style="margin:0px;width:100%;height: 100%" :src="rootUrl + item.url"></el-image>
          </div>
          <el-button style="height: 50px;margin:10px" @click="addlistimgitem">添加一项</el-button>
        </div>
        <el-button v-if="selecteditem.typekey == 1" size="mini" @click="selectCardMov">选择视频</el-button>
        <div>
          <div v-if="selecteditem.typekey == 1 && selecteditem.mov && selecteditem.mov.url != ''" style="width:100%;height:100px;position:relative;">
            <i class="el-icon-collection"></i>
            <el-button class="abs topright" type="danger" icon="el-icon-delete" circle size="mini" @click="deletecardmov(selecteditem)"></el-button>
            <label style="padding:2px;" type="textarea" :rows="1">{{ selecteditem.mov.name }}</label>
          </div>
        </div>
        <div v-if="selecteditem.typekey == 2">
          <div>
            <div class="info">名称</div>
            <div>
              <el-input v-model="selectedgroupitem.name" type="textarea" :rows="1" placeholder="请输入内容">{{ selectedgroupitem.name }}</el-input>
            </div>
          </div>
          <div>
            <div class="info">文本编辑</div>
            <div>
              <el-input v-model="selectedgroupitem.content" type="textarea" :rows="5" placeholder="请输入内容">{{ selectedgroupitem.content }}</el-input>
            </div>
          </div>
          <div style="border-bottom:1px solid gray;" v-for="(groupdata, pageindex) in selecteditem.groupdata" :key="pageindex">
            <div v-show="pageindex == currentGroupPage - 1" class="groupitem">
              <div style="position:relative" v-for="(item, cellindex) in groupdata" :key="cellindex" @click="selectgroupitem(item, pageindex, cellindex)">
                <el-button v-if="item == selectedgroupitem" class="centerpos" icon="el-icon-edit" circle size="mini" @click="selectGroupCardImg"></el-button>
                <el-button v-if="item == selectedgroupitem" style="z-index:1;" class="abs topright" type="danger" icon="el-icon-delete" circle size="mini" @click="deletegroupcard(selecteditem.groupdata, groupdata, pageindex, cellindex)"></el-button>
                <el-image style="margin:10px;width:130px;height: 100px" :src="rootUrl + item.url"></el-image>
              </div>
              <el-button style="height: 100px" v-if="groupdata && groupdata.length < 9" @click="addgroupcard(groupdata)">添加一项</el-button>
            </div>
          </div>
          <el-button size="mini" @click="addgroupcardPage()">添加一页</el-button>
          <el-pagination @current-change="groupPageChange" :page-size="9" :currentPage="currentGroupPage" layout="prev, pager, next" :page-count="selecteditem.groupdata?selecteditem.groupdata.length:0"> </el-pagination>
        </div>
        <div style="margin:10px 0px 0px 0px" v-if="addbookEnable === 0">
          <span>
            <el-button style="width:100px; margin:0px 50px;" size="mini" @click="saveShelfData">确定</el-button>
          </span>
          <span>
            <el-button style="width:100px; margin:0px 50px;" size="mini" @click="removebook">删除</el-button>
          </span>
        </div>
      </div>
    </div>
    <div :class="{
        book_shelf: true
      }">
      <div :class="{ shelfrow: true, bdselected: index == selectedshelfindex }" v-for="(bookrow, index) in books" :key="index" @click.self="selectshelfrow(bookrow, index)">
        <div class="shelftitle">{{ bookrow.shelftitle }}</div>
        <div v-for="(bookitem, bookindex) in bookrow.book" :key="bookindex" class="book" :class="[
            bookitem._class,
            {
              bookbdselected: bookindex == selecteditemindex && index == selectedshelfindex
            }
          ]" @click="editbook(bookitem, bookindex, index)">
          <div class="title">{{ bookitem.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  uploadshelfdata,
  getshelfdata,
  getnotice,
  setnotice,
} from '@/request/shelfdata.js'
import FileList from '../FileList'
const { rootUrl } = require('/public/config.json')
export default {
  name: 'ShelfBook',
  components: {
    FileList,
  },
  data() {
    return {
      rootUrl: rootUrl, //图片资源根路径
      addbookEnable: -1, //添加书籍按钮显示
      radio1: '', //厚薄
      radio2: '', //高矮
      radio3: '', //左右倒
      selecteditem: {}, //选中书籍数据
      selectedgroupitem: {}, //选中动植物groupdata数据
      selectedlistitem: {}, //商品图片列表
      selectedshelfindex: -1, //选中书架索引
      selecteditemindex: -1, //选中书籍索引
      books: [], //书籍数据
      notice: { info: '' }, //通知消息
      selectedshelfrow: [], //当前选中书籍组
      booktype: '图文', //dropdown选中文字内容
      bookstyle: [
        //书籍类型
        { key: 0, content: '图文' },
        { key: 1, content: '视频' },
        { key: 2, content: '图片组' },
        { key: 3, content: '图片' },
        { key: 4, content: '商品列表' },
        { key: 5, content: '天气' },
        { key: 6, content: '驿站节点' },
        { key: 7, content: '实时公交' },
      ],
      showFileList: false, //文件选择列表
      currentGroupPage: 1, //当前选中group页索引
    }
  },
  computed: {
    selectedimgurl() {
      return this.selecteditem.img ? rootUrl + this.selecteditem.img : ''
    },
    selectedGroupItemUrl() {
      return this.selectedgroupitem.url
        ? rootUrl + this.selectedgroupitem.url
        : ''
    },
  },
  mounted() {
    getshelfdata().then((res) => {
      this.books = JSON.parse(res.data)
      console.log(this.books)
    })
    getnotice().then((res) => {
      this.notice = JSON.parse(res.data)
      console.log(this.notice)
    })
  },
  methods: {
    // 编辑书籍
    editbook(bookitem, bookindex, shelfindex) {
      this.selecteditemindex = bookindex
      this.selectedshelfindex = shelfindex
      this.selecteditem = bookitem
      this.addbookEnable = 0
      if (bookitem.typekey) {
        this.booktype = this.bookstyle[bookitem.typekey].content
      }
      this.setRadioByclass(bookitem._class)
    },
    // 选中组图
    selectgroupitem(item, pageindex, cellindex) {
      this.selectedgroupitem = item
      console.log(item, pageindex, cellindex)
    },
    selectlistitem(item, index) {
      this.selectedlistitem = item
      console.log(item, index)
    },
    // 切换书籍类型
    handleCommand(command) {
      this.booktype = command.content
      this.selecteditem.typekey = command.key
      console.log('typekey', this.selecteditem.typekey)
      switch (this.selecteditem.typekey) {
        case 0: //图文
          this.selecteditem.routerto = '/cardetail'
          break
        case 1: //视频
          this.selecteditem.routerto = '/movdetail'
          break
        case 2: //图片组
          this.selecteditem.routerto = '/animaldetail'
          break
        case 3: //单张图片
          this.selecteditem.routerto = '/cardimg'
          break
        case 4: //商城
          this.selecteditem.routerto = '/store'
          break
        case 5: //天气
          this.selecteditem.routerto = '/health'
          break
        case 6: //驿站节点
          this.selecteditem.routerto = '/poststage'
          break
        case 7: //实时公交
          this.selecteditem.routerto = '/busline'
          break
      }
      console.log(this.selecteditem, 'command', command)
    },
    selectshelfrow(bookrow, index) {
      this.selectedshelfrow = bookrow
      this.selecteditemindex = -1
      this.selectedshelfindex = index
      console.log(index)
      this.addbookEnable = 1
    },
    ratiochange() {
      this.selecteditem._class =
        this.radio1 + ' ' + this.radio2 + ' ' + this.radio3
    },
    addbook(index) {
      console.log(this.books[this.selectedshelfindex].book)
      if (this.books[this.selectedshelfindex].book.length > 20) {
        this.$message.warning('书架放不下了!')
        return
      }
      this.addbookEnable = 0
      console.log(index)
      let newbook = {
        _class: '',
        img: '',
        title: '',
        mov: { name: '', url: '' },
        routerto: '/cardetail',
        typekey: 0,
        groupdata: [],
        listdata: [],
      }
      this.books[this.selectedshelfindex].book.push(newbook)
      this.selecteditem = newbook
      this.selecteditemindex =
        this.books[this.selectedshelfindex].book.length - 1
      this.booktype = this.bookstyle[this.selecteditem.typekey].content
    },
    //删除一本书
    removebook() {
      console.log(
        this.books[this.selectedshelfindex].book.splice(
          this.selecteditemindex,
          1
        )
      )
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
      })
    },
    movebook(direct) {
      switch (direct) {
        case 'left':
          this.books[this.selectedshelfindex].book.splice(
            this.selecteditemindex,
            1
          )
          break
        case 'right':
          break
      }
    },
    // 保存
    saveShelfData() {
      uploadshelfdata(this.books).then((res) => {
        console.log(JSON.parse(res.data))
      })
      setnotice(this.notice).then((res) => {
        console.log(JSON.parse(res.data))
      })
      this.$notify({
        title: '成功',
        message: '保存成功',
        type: 'success',
      })
    },
    //预览
    toReview() {
      window.open(rootUrl + '/dist', '_blank')
    },
    //设置书籍样式
    setRadioByclass(_class) {
      this.radio1 = ''
      this.radio2 = ''
      this.radio3 = ''
      _class.indexOf('wide') > -1 ? (this.radio1 = 'wide') : ''
      _class.indexOf('verywide') > -1 ? (this.radio1 = 'verywide') : ''
      _class.indexOf('thin') > -1 ? (this.radio1 = 'thin') : ''
      _class.indexOf('verythin') > -1 ? (this.radio1 = 'verythin') : ''
      _class.indexOf('long') > -1 ? (this.radio2 = 'long') : ''
      _class.indexOf('verylong') > -1 ? (this.radio2 = 'verylong') : ''
      _class.indexOf('short') > -1 ? (this.radio2 = 'short') : ''
      _class.indexOf('veryshort') > -1 ? (this.radio1 = 'veryshort') : ''
      _class.indexOf('left') > -1 ? (this.radio3 = 'left') : ''
      _class.indexOf('right') > -1 ? (this.radio3 = 'right') : ''
    },
    //弹出文件列表 图片模式
    selectCardImg() {
      this.showFileList = true
    },
    //弹出文件列表 视频模式
    selectCardMov() {
      this.showFileList = true
    },
    //弹出文件列表 图片组模式
    selectGroupCardImg() {
      this.showFileList = true
    },
    // 删除图片
    deletecardimg(selecteditem) {
      selecteditem.img = ''
    },
    //删除组图一小项
    deletegroupcard(groupdatas, groupdata, pageindex, cellindex) {
      groupdata.splice(cellindex, 1)
      if (groupdata.length == 0) {
        // 页数据为空数组 则删除页
        groupdatas.splice(pageindex, 1)
        if (this.currentGroupPage >= 2) {
          this.currentGroupPage--
        }
      }
    },
    deleteitem(listdata, itemindex) {
      listdata.splice(itemindex, 1)
    },
    //添加图片组一项数据
    addgroupcard(groupdata) {
      const newitem = {
        url: '',
        imgname: '',
        name: '',
        content: '',
      }
      groupdata.push(newitem)
    },
    //添加图片组一页 外层数组 数据
    addgroupcardPage() {
      const newrawitem = [
        {
          url: '',
          imgname: '',
          name: '',
          content: '',
        },
      ]
      if (!this.selecteditem.groupdata) {
        this.$set(this.selecteditem, 'groupdata', [[{}]])
      }

      this.selecteditem.groupdata.push(newrawitem)
    },
    //添加商品图
    addlistimgitem() {
      if (!this.selecteditem.listdata) {
        this.$set(this.selecteditem, 'listdata', [])
      }
      this.selecteditem.listdata.push({
        url: '',
      })
    },
    // 点击分页
    groupPageChange(index) {
      this.currentGroupPage = index
      console.log(index)
    },
    //删除视频
    deletecardmov(selecteditem) {
      selecteditem.mov = { name: '', url: '' }
    },
    //隐藏文件列表
    cancelSelect() {
      this.showFileList = false
    },
    //文件选择 确定
    confirmSelect(selectionFile) {
      console.log(selectionFile)
      this.showFileList = false
      if (
        Number(this.selecteditem.typekey) === 0 ||
        Number(this.selecteditem.typekey) === 3
      ) {
        //选择图片
        this.selecteditem.img = selectionFile.fileUrl
      } else if (Number(this.selecteditem.typekey) === 1) {
        console.log('confirmSelect:', this.selecteditem, selectionFile)
        //选择视频
        this.selecteditem.mov.url = selectionFile.fileUrl
        this.selecteditem.mov.name = selectionFile.fileName
      } else if (Number(this.selecteditem.typekey) === 2) {
        //图片组选择文件
        this.selectedgroupitem.url = selectionFile.fileUrl
        // this.selecteditem.mov.name = selectionFile.fileName
      } else if (Number(this.selecteditem.typekey) === 4) {
        //商品列表选择图片
        this.selectedlistitem.url = selectionFile.fileUrl
        // this.selecteditem.mov.name = selectionFile.fileName
      }
    },
  },
}
</script>

<style scoped lang="scss">
//屏幕分辨率
$screenwidth: 1080px;
$screenheight: 600px;
$gridgapcolor: #d1e2ff; //书柜架子颜色
$cellheight: 460px; //格子内容高度
$gridgap: 20px; //格子间隔
$scrolltime: 0.8s; //滑动动画时间
$editbookwidth: 500px;
.FileGrid {
  position: absolute;
  width: $screenwidth;
  z-index: 1;
  background: white;
}
//书架顶部 向下滑动的时候模拟书架顶部一栏
.shelftop {
  width: $screenwidth;
  height: $cellheight;
  border-bottom: $gridgap solid $gridgapcolor;
  background: black;
  position: absolute;
  top: calc(-#{$cellheight} - #{$gridgap});
  z-index: -1;
}
.shelftop::before {
  content: '';
  width: $gridgap;
  height: calc(#{$cellheight} + #{$gridgap});
  position: absolute;
  background: $gridgapcolor;
  top: 0px;
  transform: translate(-50%, 0);
}
//书架底部 向下滑动的时候模拟书架底部一栏
.shelfbottom {
  width: $screenwidth;
  height: calc(#{$cellheight});
  background: black;
  position: absolute;
  bottom: calc(-#{$cellheight} - #{$gridgap});
  z-index: -1;
}
.shelfbottom::after {
  content: '';
  width: $gridgap;
  height: calc(#{$cellheight} + #{$gridgap});
  position: absolute;
  background: $gridgapcolor;
  bottom: 0px;
  transform: translate(-50%, 0);
}
//书架向下移动一格 注意$scrolltime和setTimeout中时间同步
.movedown {
  transition: transform $scrolltime ease;
  transform: translate(0, calc(#{$cellheight} + #{$gridgap}));
}
.moveup {
  transition: transform $scrolltime ease;
  transform: translate(0, calc(-#{$cellheight} - #{$gridgap}));
}
// 书架
.book_shelf {
  width: calc(80vw - #{$editbookwidth});
  height: calc(100vh - 61px);
  // border-bottom: 20px solid $gridgapcolor;
  overflow: scroll;
  display: grid;
  grid-template-columns: 49% 49%;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-column-gap: $gridgap; //竖条宽度
  grid-row-gap: $gridgap; //横条宽度
  background: $gridgapcolor;
  //行容器
  .shelfrow {
    $bookwidth: 30px; //普通书本尺寸
    $bookheight: 300px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    background: black;
    border: 2px solid #d1e2ff;
    position: relative;
    .shelftitle {
      position: absolute;
      top: 0px;
      left: 0px;
      background: #d1e2fe;
      color: #286cb1;
      font-weight: bold;
      line-height: 2em;
      text-align: center;
      padding: 0 1em;
      border-bottom-right-radius: 4px;
    }
    //book 样式-------------------
    .book {
      width: $bookwidth;
      height: $bookheight;
      background: #296cb1;
      box-sizing: content-box;
      margin: 0 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .title {
        writing-mode: tb-rl;
        text-align: center;
        line-height: 1.2em;
        letter-spacing: 0.2em;
        white-space: pre;
        vertical-align: middle;
        color: white;
        font-family: 宋体;
      }
    }
    .bookbdselected {
      background: #e09821;
    }
    .book:hover {
      opacity: 0.9;
    }
    ml10 {
      margin-left: 10px;
    }
    mr10 {
      margin-right: 10px;
    }
    //宽
    .wide {
      width: $bookwidth * 1.4;
    }
    .verywide {
      width: $bookwidth * 2;
    }
    //薄
    .thin {
      font-size: 8px;
      width: $bookwidth * 0.8;
    }
    .verythin {
      font-size: 6px;
      width: $bookwidth * 0.6;
    }
    .short {
      height: $bookheight * 0.8;
    }
    .veryshort {
      height: $bookheight * 0.6;
    }
    .long {
      height: $bookheight * 1.2;
    }
    .verylong {
      height: $bookheight * 1.4;
    }
    //左边倒
    .left {
      transform: rotate(-4deg);
      margin: 1px 10px;
    }
    //右边倒
    .right {
      transform: rotate(4deg);
      margin: 1px 10px;
    }
    //book 样式 end-------------------
  }
  .bdselected {
    border: 2px solid #e09821;
  }
}

.edit-book {
  width: $editbookwidth;
  height: calc(100vh - 60px);
  background: #333333;
  border-left: 1px solid #000000;
  padding: 10px 20px;
  color: white;
  position: fixed;
  right: 0px;
  z-index: 10;
  overflow: auto;
}
.info {
  margin: 10px 0px;
}

/deep/ .el-button {
  margin: 10px 0px;
}
.topsavebar {
  margin-left: auto;
  display: flex;
  justify-content: center;
}
.file-img {
  object-fit: contain;
}
.groupitem {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}
.centerpos {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
